<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>border——————三角样式</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                border: 1px solid red;
            }
            ul{
                list-style: none;
            }
            li:nth-child(1){
                width: 0;
                height: 0;
                border-top: 20px solid red;
                border-right: 20px solid transparent;
                border-left: 20px solid transparent;
                border-bottom: 20px solid transparent;/*transparent：透明色*/
            }
            li:nth-child(2){
                width: 0;
                height: 0;
                margin-bottom: 30px;
                border-top: 20px solid transparent;
                border-right: 20px solid yellow;
                border-left: 20px solid transparent;
                border-bottom: 20px solid transparent;/*transparent：透明色*/
            }
            li:nth-child(3){
                 width: 0;
                 height: 0;
                 margin-bottom: 30px;
                 border-top: 20px solid transparent;
                 border-right: 20px solid transparent;
                 border-left: 20px solid orangered;
                 border-bottom: 20px solid transparent;/*transparent：透明色*/
             }
            li:nth-child(4){
                width: 0;
                height: 0;
                margin-bottom: 30px;
                border-top: 20px solid transparent;
                border-right: 20px solid transparent;
                border-left: 20px solid transparent;
                border-bottom: 20px solid pink;/*transparent：透明色*/
            }

            p{
                height: 20px;
                background: #2f2f2f;
            }
        </style>
    </head>
    <body>
        <div></div>
        <p></p>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>